<template>
  <div>展示组件内守卫的组件 -- {{ name }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: "狗蛋",
    };
  },
  beforeRouteEnter(to, from, next) {
    // console.log(to, from);
    // 但是注意，路由进入前是没有该组件的，得到不this的
    console.log("路由进入前");
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // console.log(to, from);
    console.log("路由更新");
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 如果从当前的路由离开，就会触发当前的函数
    console.log("路由离开");
    next();
  },
};
</script>
